// 热门游戏拼接
var hotGameList = document.querySelector('.hot-game-list');
var hotGameStr = '';
for (var i = 0; i < hotGame.length; i++) {
    hotGameStr += `<li class="hot-game-item">${hotGame[i]}</li>`
}
hotGameList.innerHTML = hotGameStr;

var hotGameItem = document.querySelectorAll('.hot-game-item');
hotGameItem[0].classList.add('active');
// 轮播图
var slideImgs = document.querySelectorAll('.left-slide-imgs img');
var slideText = document.querySelectorAll('.mask-title-slide');
var maskImgs = document.querySelectorAll('.mask-img-item');
var fhcenterSlide = document.querySelector('.fhcenter-left-slide');
var maskImgsList = document.querySelector('.mask-imgs');
var index = 0;
function fhSlide() {
    for (var i = 0; i < slideImgs.length; i++) {
        slideImgs[i].classList.remove('active');
        slideText[i].classList.remove('active');
        maskImgs[i].classList.remove('active');
    }
    slideImgs[index].classList.add('active');
    slideText[index].classList.add('active');
    maskImgs[index].classList.add('active');
}
var timer = setInterval(function () {
    index++;
    if (index >= slideImgs.length) {
        index = 0;
    }
    fhSlide();
}, 2000)
fhcenterSlide.onmouseenter = function () {
    clearInterval(timer);
}
fhcenterSlide.onmouseleave = function () {
    timer = setInterval(function () {
        index++;
        if (index >= slideImgs.length) {
            index = 0;
        }
        fhSlide();
    }, 2000)
}
maskImgsList.onmouseover = function (e) {
    if (e.target.localName == 'div') {
        var k = e.target.dataset.i;
        for (var i = 0; i < slideImgs.length; i++) {
            slideImgs[i].classList.remove('active');
            slideText[i].classList.remove('active');
            maskImgs[i].classList.remove('active');
        }
        slideImgs[k].classList.add('active');
        slideText[k].classList.add('active');
        maskImgs[k].classList.add('active');
    }
}
// 排行榜拼接
var spePolicy = document.querySelector('.special-policy');
var policyStr = '';
specialPolicy.forEach(item => {
    policyStr += `
    <li class="rank-item-default">
        <div class="item-default-num">${item.num}</div>
        <p class="item-default-title">${item.title}</p>
        <div class="item-default-get"></div>
    </li>
    <li class="rank-item-hover">
        <div class="item-hover-num">${item.num}</div>
        <img src="${item.imgurl}" alt="">
        <p class="item-hover-title">
            ${item.title}
            <span class="item-hover-ling">领号</span>
        </p>
    </li>
    `
})
spePolicy.innerHTML = policyStr;
var activation = document.querySelector('.activation-code');
var activationStr = '';
activationCode.forEach(item => {
    activationStr += `
    <li class="rank-item-default">
        <div class="item-default-num">${item.num}</div>
        <p class="item-default-title">${item.title}</p>
        <div class="item-default-get"></div>
    </li>
    <li class="rank-item-hover">
        <div class="item-hover-num">${item.num}</div>
        <img src="${item.imgurl}" alt="">
        <p class="item-hover-title">
            ${item.title}
            <span class="item-hover-ling">领号</span>
        </p>
    </li>
    `
})
activation.innerHTML = activationStr;
var newGift = document.querySelector('.new-giftbag');
var newGiftStr = '';
giftbag.forEach(item => {
    newGiftStr += `
    <li class="rank-item-default">
        <div class="item-default-num">${item.num}</div>
        <p class="item-default-title">${item.title}</p>
        <div class="item-default-get"></div>
    </li>
    <li class="rank-item-hover">
        <div class="item-hover-num">${item.num}</div>
        <img src="${item.imgurl}" alt="">
        <p class="item-hover-title">
            ${item.title}
            <span class="item-hover-ling">领号</span>
        </p>
    </li>
    `
})
newGift.innerHTML = newGiftStr;
var todaybook = document.querySelector('.today-book');
var todaybookStr = '';
todayBook.forEach(item => {
    todaybookStr += `
    <li class="rank-item-default">
        <div class="item-default-num">${item.num}</div>
        <p class="item-default-title">${item.title}</p>
        <div class="item-default-get"></div>
    </li>
    <li class="rank-item-hover">
        <div class="item-hover-num">${item.num}</div>
        <img src="${item.imgurl}" alt="">
        <p class="item-hover-title">
            ${item.title}
            <span class="item-hover-ling">领号</span>
        </p>
    </li>
    `
})
todaybook.innerHTML = todaybookStr;
// 新服表侧栏拼接
var newSevergame = document.querySelector('.new-sever-gameName');
var newSeverStr = '';
newSever.forEach(item => {
    newSeverStr += `
        <li class="sever-gameName-item">${item.title}</li>
    `
})
newSevergame.innerHTML = newSeverStr;
var newSevertime = document.querySelector('.new-sever-gameTime');
var newTimeStr = '';
newSever.forEach(item => {
    newTimeStr += `
        <li class="sever-gameName-time">${item.time}</li>
    `
})
newSevertime.innerHTML = newTimeStr;
var newSeversend = document.querySelector('.new-sever-sendNum');
var newSendStr = '';
for (var i = 0; i <= 9; i++) {
    newSendStr += '<li class="send-num">领号</li>';
}
newSeversend.innerHTML = newSendStr;
var nowadList = document.querySelector('.now-ad-list');
var nowAdStr = '';
nowAd.forEach(item => {
    nowAdStr += `
    <li class="now-ad-item">
        <div class="cloumn-one">
            <p class="cloumn-username">
                ${item.username}
                <span class="cloumn-ling">领取了</span>
            </p>
            <p class="cloumn-time">刚刚</p>
        </div>
        <div class="cloumn-two">
            <p class="cloumn-giftBag">
                ${item.gift}
            </p>
            <div class="cloumn-want">
                我也要
            </div>
        </div>
    </li>
    `
})
nowadList.innerHTML = nowAdStr;
